<template>
  <div class="wap">
    <!-- <div>
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>商品管理</span>
        <div class="overwrite-title-right" slot="right" @click="goGoodCategory">商品分类</div>
      </x-header>
      <div class="display-flex search-content align-items-center">
        <group class="flex-1">
          <x-input @keyup.enter.native="showSearch" v-model="searchKey" type="text" :show-clear="false"
                   :placeholder="searchIcon"></x-input>
        </group>
        <div @click="showSearch" class="btn-search">搜索</div>
      </div>
      <tab active-color="#527DD9" custom-bar-width="0.87rem">
        <tab-item selected @on-item-click="onItemClick(0)">在售商品</tab-item>
        <tab-item @on-item-click="onItemClick(6)">库存<20</tab-item>
        <tab-item @on-item-click="onItemClick(1)">库存=0</tab-item>
        <tab-item @on-item-click="onItemClick(2)">销售=0</tab-item>
        <tab-item @on-item-click="onItemClick(3)">未上架/下架</tab-item>
      </tab>
    </div> -->
      <div class="main">
        <goodManager v-show="currentIndex==0"></goodManager>
        <goodManager v-show="currentIndex==6"></goodManager>
        <goodManager v-show="currentIndex==1"></goodManager>
        <goodManager v-show="currentIndex==2"></goodManager>
        <goodManager v-show="currentIndex==3"></goodManager>
      </div>
  </div>
</template>
<style lang="less" type="text/less" scoped>
  .search-content {
    background: #527DD9 !important;
    .btn-search {
      color: #fff;
      padding: .05rem .2rem .05rem .1rem;
      margin-right: .2rem;
      border: 1px solid #ddd;
      border-radius: .1rem;
    }
  }
  .no-data {
    margin-top: 40%;
  }
  /deep/ .weui-cell {
    background: #527DD9 !important;
  }
  /deep/ .weui-cells {
    margin-top: 0 !important;
  }
  /deep/ .weui-input {
    font-size: .28rem;
    text-align: center;
    background: #fff;
    border-radius: .1rem;
    height: .64rem;
  }
  ::-webkit-input-placeholder { /*Webkit browsers*/
    color: #c6c6c6;
    font-size: 16px;
    font-family: "iconfont" !important;
  }
  :-moz-placeholder { /*Mozilla Firefox 4 to 8*/
    color: #c6c6c6;
    font-size: 16px;
    font-family: "iconfont" !important;
  }
  ::moz-placeholder { /*Mozilla Firefox 19+*/
    color: #c6c6c6;
    font-size: 16px;
    font-family: "iconfont" !important;
  }
  :-ms-input-placeholder { /*Internet Explorer 10+*/
    color: #c6c6c6;
    font-size: 16px;
    font-family: "iconfont" !important;
  }

  .overwrite-title-right {
    color: #fff;
    font-size: 0.32rem;
  }

</style>
<script>
  import  goodManager from  './good-manager.vue'
  export default {
    components:{
      goodManager
    },
    data() {
      return {
        searchIcon: '\ue630 请输入商品名称查找商品',
        searchKey: '',
        cacheArray:['tab1','tab2'],
        currentIndex:0
      }
    },
    mounted() {

    },
    methods:{
      showSearch() {
        if (this.searchKey.trim().length == 0) {
          this.$vux.toast.text("请输入关键词", 'center');
          return;
        }
      },
      goGoodCategory() {
        this.$router.push({path: '/good/category'})
      },
      onItemClick(type) {
        console.log("====type",type);
          this.currentIndex=type;
      }
    }
  }
</script>
